<template>
  <div class="login-container">
    <!-- 顶部图片区域 -->
    <div class="header">
      <div class="left">
        <img :src="headerImg" />
      </div>
      <div class="right">
        <h1>门店采购</h1>
        <h3>用户登录</h3>
      </div>

    </div>

    <!-- 登录表单区域 -->
    <div class="form-content">
      <div class="login">
        <p>用户名</p>
        <mt-field class="login-name" placeholder="请输入登录账户" v-model="loginForm.login_name"></mt-field>
      </div>
      <div class="login">
        <p>密码</p>
        <mt-field class="login-pass" placeholder="请输入登录密码" type="password" v-model="loginForm.login_password"></mt-field>
      </div>
      <div class="login login-code clearfix">
        <div class="code-input fleft">
          <p>验证码</p>
          <mt-field class="login-code" placeholder="请输入验证码" v-model="loginForm.sRand"></mt-field>
        </div>
        <div class="code-img fright clearfix">
          <img :src="codeImgSrc" class="code fleft" />
          <div class="change-code fleft" @click="ValidateCode">
            <img :src="changeCode" alt="change">
            <span>换一下</span>
          </div>
        </div>

      </div>
      <mt-button type="primary" class="login-button" size="large" @click.native.prevent="handleLogin">登录</mt-button>
    </div>

    <!-- 底部Logo区域 -->

    <div class="footer">

      <img :src="footerLogo" alt="logo">

    </div>
  </div>
</template>

<script>
import { GetValidateCode } from '@/api/login'
import { Toast } from 'mint-ui';

export default {
  components: {},
  name: 'login',
  data() {
    const validatePass = (rule, value, callback) => {
      if (value.length < 6) {
        callback(new Error('密码不能小于6位'));
      } else {
        callback();
      }
    };
    return {
      loginForm: {
        login_name: '',
        login_password: '',
        sRand: '',
        uuid: ''
      },
      loading: false,
      codeImgSrc: '',
      headerImg: require("@/assets/images/登录_02.png"),
      footerLogo: require("@/assets/images/登录_06.jpg"),
      changeCode: require("@/assets/images/更换.png"),
    }
  },
  created() {
    this.ValidateCode()
  },
  methods: {
    checkform() {
      if (this.loginForm.login_name === '') {
        Toast("账户不能为空");
        return false;
      }
      if (this.loginForm.login_name.length < 3
        || this.loginForm.login_name.length > 20) {
        Toast("长度在 3 到 20 个字符");
        return false;
      }

      if (this.loginForm.login_password === '') {
        Toast("密码不能为空");
        return false;
      }
      if (this.loginForm.login_password.length < 6) {
        Toast("密码不能小于6位");
        return false;
      }
      if (this.loginForm.sRand === '') {
        Toast("验证码不能为空");
        return false;
      }
      if (this.loginForm.sRand.length != 4) {
        Toast("验证码长度必须为4个字符");
        return false;
      }
      return true;
    },
    ValidateCode() {
      GetValidateCode(this.loginForm.uuid).then(response => {
        if (response.status === 200) {
          this.codeImgSrc = 'data:image/png;base64,' + response.data;
          this.loginForm.uuid = response.message;
        } else {
          this.codeImgSrc = '';
          this.loginForm.uuid = '';
        }
      })
    },
    handleLogin() {
      if (this.checkform()) {
        this.$store.dispatch('LoginByPassword', this.loginForm).then(() => {

          if (typeof screenid) {
            this.$router.push({ path: '/' });
          } else {
            this.$router.push({ path: '/screenbind' });
          }

        }).catch(() => {
          this.ValidateCode();
        });
      } else {
        this.ValidateCode();
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
.login-container {
  width: 100%;
  min-height: 100vh;
  background-color: #fff;
  position: relative;
  border-top: 1px solid transparent;
  box-sizing: border-box;
  .header {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #36acda;
    .left {
      width: 63%;
      img {
        width: 100%;
        display: block;
      }
    }
    .right {
      color: #fff;
      text-align: right;
      position: absolute;
      right: 1rem;
      top: 4rem;
      // background-color: red;
      h1 {
        font-size: 20px;
        opacity: 0.6;
      }
      h3 {
        font-size: 30px;
        margin-top: 0.625rem;
        font-weight: bold;
      }
    }
  }
  .form-content {
    width: 100%;
    padding: 0 0.6rem;
    margin-top: 8.5rem;
    box-sizing: border-box;
    position: relative;
    z-index: 999;
    .login {
      width: 100%;
      padding: 1rem 0.6rem 0.2rem 0.6rem;
      background-color: #fff;
      box-sizing: border-box;
      border-radius: 0.2rem;
      // border:1px solid #eee;
      box-shadow: 0px 2px 9px #e3e3e3;
      margin-bottom: 1rem;
      .mint-field-core {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        border-radius: 0;
        border: 0;
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        outline: 0;
        line-height: 1.6;
        font-size: inherit;
        width: 100%;
        height:auto;
        margin-bottom: 0;
        padding: 0;
      }
      input::-webkit-input-placeholder {
        font-size: 14px;
        color: #e4e4e4;
      }
      input:-moz-placeholder {
        font-size: 14px;
        color: #e4e4e4;
      }
      input:-ms-input-placeholder {
        font-size: 14px;
        color: #e4e4e4;
      }

      .mint-cell:last-child {
        background-image: none;
        background-size: 100%;
      }
      &.login-code {
        .code-input {
          width: 7.5rem;
        }
        .code-img {
          width: 9rem;
          .code {
            width: 60px;
            height: 40px;
            border: 1px solid #ddd;
            display: block;
            border-radius: 2px;
          }
          .change-code {
            // width:67px;
            height: 40px;
            line-height: 40px;
            margin-left: 5px;
            border: 1px solid transparent;
            img {
              width: 20px;
              // vertical-align: middle;
              position: relative;
              top: 3px;
            }
            span {
              font-size: 14px;
              color: #3aadda;
            }
          }
        }
      }
      p {
        color: #b8b8b8;
        font-size: 16px;
        padding-left: 0.5rem;
      }
    }

    .login-button {
      height: 3rem;
      font-size: 16px;
      margin-top: 2rem;
      background-color: #36acda;
    }
  }
  .footer {
    text-align: center;
    border-bottom: 1px solid transparent;
    margin-top: 1.5rem;
    img {
      width: 4rem;
    }
  }
}

.mint-cell-wrapper{
  background-image: none;
}
</style>